<!DOCTYPE html>
<html lang="en">
<head>
  <title>SQL Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
  <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
</head>

<body>
  <div class="jumbotron text-center">
    <h1 class="display-1">SQL Example 2</h1>
  </div>

  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="/">Home</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="part1">Part 1 </a>
          </li>

          <li class="nav-item active">
            <a class="nav-link" href="part2">Part 2<span class="sr-only">(current)</span></a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="row">
      <p>This is the second SQL example. This time you are going to do an actual SQL injection. This time you aren't given any table names and there is an actual query that you have to inject into.
      </p>
      </br>
    </div>

    <div class="row">
      <div class="card border-danger mb-3">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
          <button class="btn btn-danger btn-smbtn-danger " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Hint</button>
          </h2>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
          <div class="card-body"><code>The query is: SELECT title, author FROM books WHERE title LIKE '%yoursearch%' AND pages &lt;= 400;</code></div>
        </div>
      </div>
    </div>

    <div class="row">
      {% if flag %}
      <h1>Flag: b0ctf{sql_is_pretty_cool!}</h1>
      {% endif %}
    </div>


    <div class="row">
      <div class="col-sm-2">
        <h3>Search:</h3>
      </div>

      <div class="col-sm-10">
        <form action="part2" method="post">
          <input type="text" name="query" style="width:80%"/>
          <button type="submit">Search</button>
        </form>
      </div>
    </div>

    <div class="row">
      {% if results %}
      <h3>Query Results:</h3>
        <table class="table">
          <thead>
            <tr>
              <td>id</td>
              <td>title</td>
              <td>author</td>
              <td>chapters</td>
              <td>pages</td>
            </tr>
          </thead>

          <tbody>
            {% for row in results %}
            <tr>
              {% for col in row %}
              <td>{{col}}</td>
              {% endfor %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
      {% elif error %}
      <h3>Error: {{error}}</h3>
      {% else %}
      <h3>Search Results: None</h3>
      {% endif %}
    </div>
  </div>
</body>
</html>
